<template>
  <div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '60%' }" get-container="body">
      <ne-pick :title="itemTitle" @cancel="show=false">
        <div>
          <div style="height:calc((100vh * 0.6) - 44px - 50px);overflow: auto;">
            <van-form ref="form">
              <van-field
                  v-model="formData.appointmentPersonName"
                  label="姓名"
                  placeholder="请输入"
                  :rules="[{ required: true, message: '请输入姓名' }]"
              />
              <van-field
                  v-model="formData.appointmentPhone"
                  label="联系电话"
                  placeholder="请输入"
                  :rules="[{ required: true, message: '请输入联系电话' },{pattern, message: '请输入正确的联系电话' }]"
              />
            </van-form>
          </div>
          <div class="page-detail_footer box_footer">
            <van-button type="primary" round style="width: 200px;margin: 0 auto;flex: unset" @click="submit">提交报名</van-button>
          </div>
        </div>
      </ne-pick>
    </van-popup>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import NePick from "../../../components/NePick.vue";
import {tbAppointmentSave} from "../../../api/tbAppointment";
import {mapGetters} from "vuex";

export default {
  components: {NePick},
  data() {
    return {
      show: false,
      formData: {
        appointmentPersonName: '',
        appointmentPhone: '',
        appointmentUserId:''
      },
      pattern:/^1[3-9]\d{9}$/
    }
  },
  computed:{
    ...mapGetters(['userInfo']),
  },
  props:{
    /**
     * appointmentType 预约类型 字典表appointment_type类型的 1文化讲堂 2群众活动 3课程 4共享奶奶
    **/
    appointmentType:{
      type:String,
      default:''
    },
    /**
     * 活动主键 如果是预约共享奶奶,传奶奶对应达人库index_code
    **/
    itemIndexCode:{
      type:String,
      default:''
    },
    itemTitle:{
      type:String,
      default:''
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    submit() {
      const _this = this
      const formData = {
        ..._this.formData,
        appointmentType:_this.appointmentType,
        itemIndexCode:_this.itemIndexCode,
        appointmentUserId:_this.userInfo.userId,
        appointmentName:_this.itemTitle
      };
      this.$refs.form.validate().then(()=>{
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        }).then(() => {
          _this.$showLoading("提交中...")
          tbAppointmentSave(formData).then(() => {
            _this.$hideLoading()
            _this.show = false
            this.$emit('success')
            Toast.success('提交成功')
          }).catch(() => {
            _this.$hideLoading()
          })
        }).catch(() => {});
      })
    }
  }
}
</script>
